<!DOCTYPE html>
<html>

<head>
	<title>leaflet-elevation.js</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style>
		html,
		body,
		.leaflet-map,
		.elevation-div {
			height: 100%;
			width: 100%;
			padding: 0px;
			margin: 0px;
		}

		.leaflet-map {
			height: 55%;
			max-height: 100vh;
		}

		.elevation-div {
			height: 25%;
			font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
		}
	</style>

	<!-- leaflet-ui -->
	<script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>
	<script src="https://unpkg.com/leaflet-ui@latest/dist/leaflet-ui-src.js"></script>

	<!-- <script src='https://unpkg.com/@tmcw/togeojson@4.1.0/dist/togeojson.umd.js'></script> -->

	<!-- D3 -->
	<!-- <script src="https://unpkg.com/d3@5.15.0/dist/d3.js"></script> -->

	<!-- leaflet-gpx -->
	<!-- <script src="https://unpkg.com/leaflet-gpx@1.5.0/gpx.js"></script> -->

	<!-- leaflet-geometryutil -->
	<script src="https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js"></script>

	<!-- leaflet-almostover -->
	<script src="https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js"></script>


	<!-- leaflet-elevation -->
	<link rel="stylesheet" href="../dist/leaflet-elevation.css" />
	<script src="../dist/leaflet-elevation.js"></script>

</head>

<body>

	<div id="map" class="leaflet-map"></div>

	<script>
		var opts = {
			map: {
				center: [41.4583, 12.7059],
				zoom: 5,
				fullscreenControl: false,
				resizerControl: true,
				preferCanvas: true,
			},
			elevationControl: {
				url: 'multi.gpx',
				// url: "../examples/via-emilia.gpx",
				// url: "../examples/demo.geojson",
				// url: "../examples/waypoints.gpx",
				// url: "https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx",
				// url: "https://raruto.github.io/leaflet-elevation/examples/demo.geojson",
				options: {
					theme: "lightblue-theme",
					collapsed: false,
					autohide: false,
					position: "bottomleft",
					detached: true,
					summary: "inline",
					imperial: false,
					// slope: "summary",
					slope: "disabled",
					time: true,
					speed: "disabled",
					acceleration: "disabled",
					altitude: false,
					legend: true,
					followMarker: true,
					// zFollow: 13,
					ruler: true,
					polyline: false,
					// marker: 'position-marker',
					// dragging: true,
				},
			},
			layersControl: {
				options: {
					collapsed: false,
				},
			},
		};

		var map = new L.Map('map', opts.map);
		var controlElevation = L.control.elevation(opts.elevationControl.options);
		var controlLayer = L.control.layers(null, null, opts.layersControl.options);

		controlElevation.load(opts.elevationControl.url);
		controlElevation.addTo(map);

		// map.on('eledata_loaded', function(e) {
		// 	if (!controlLayer._map) controlLayer.addTo(map);
		// 		controlElevation._gaps = controlElevation._data.reduce(function(array, item ) {
		// 		if (item.trkEnd) array.push([]);
		// 		if (array.length && (item.trkStart || item.trkEnd)) array[array.length-1].push(item);
		// 		return array;
		// 	}, []);
		// 	controlLayer.addOverlay(e.layer, e.name);
		// });
		//
		// controlElevation.on('eletrack_added', function(e) {
		// 	this._data[0].trkStart = true;
		// 	this._data[this._data.length-1].trkEnd = true;
		// 	this.once('eledata_updated', function(e){
		// 		this._data[this._data.length-1].trkStart = true;
		// 	});
		// 	console.log(this._data[this._data.length-1], e);
		// });
	</script>

	<script>
		var mylocale = {
			"Total Length: ": "Distanza: ",
			"Max Elevation: ": "Altezza Max: ",
			"Min Elevation: ": "Altezza Min: ",
			"Total Time: ": "Durata: ",
			"Total Ascent: ": "Salita: ",
			"Total Descent: ": "Discesa: ",
			"Min Slope: ": "Pendenza Min: ",
			"Max Slope: ": "Pendenza Max: ",
			"Min Speed: ": "Velocità Min: ",
			"Max Speed: ": "Velocità Max: ",
			"Avg Speed: ": "Velocità Media: ",
		};

		L.registerLocale('it', mylocale);
		L.setLocale('it');
	</script>

	<a href="https://github.com/Raruto/leaflet-elevation" class="view-on-github" style="position: fixed;bottom: 30px;left: calc(50% - 81px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"
		 width="163"> </a>

</body>

</html>
